<template>
    <layout>
        <div class='wrapper'>
            <div class="list-wrapper" v-show="listData.length>0">
                <van-row class="list-item" v-for="item,index in listData" :key="index">
                    <van-col :span="12" class="person-info">
                        <van-row class="name">{{item.linkMan}}</van-row>
                        <van-row class="phone">{{item.linkPhone}}</van-row>
                    </van-col>
                    <van-col :span="12" class="userNum">
                        <van-row class="title">预约人数</van-row>
                        <van-row class="number">{{item.userNum}}</van-row>
                    </van-col>
                    <van-col class="address" :span="24">
                        <!-- <span>详细地址：</span> -->
                        {{item.address}}
                    </van-col>
                    <van-col class="pay-btn" :span="24">
                        <van-button type="primary" class="btn" @click="wxToPay(item.applyId,item.itemPrice)">去支付</van-button>
                    </van-col>
                    <van-col class="date" :span="24">
                        采样日期:{{item.applyTime}}
                    </van-col>
                </van-row>
            </div>
            
        </div>
        <van-empty v-show="listData.length==0" description="暂无数据" />
    </layout>
    
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import nucleicApi from '@/api/nucleic'
import nucleicPayApi from "@/api/nucleicPay"
export default {
// import引入的组件需要注入到对象中才能使用
  data  () {
// 这里存放数据
    return {
        listData:[],
        openId:"",
    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {},
// 方法集合
  methods: {
    init() {
        // this.applyUserId = this.$route.query.code
        this.getOpenId()
        // this.getPayList()
    },
    getOpenId(){
        let params={
            code:this.$route.query.code||false
        }
        nucleicApi.getOpenId(params)
            .then(res=>{
                if(res.status==0){
                    if(res.data){
                        this.openId = res.data
                        this.getPayList()
                    }else{
                         // 关闭当前界面 回退公众号栏
                         this.$dialog.alert({
                            title:"提示",
                            message:"请退出页面，重新进入，否者此次申请无效!"
                         }).then(res=>{
                            window.close();
                            WeixinJSBridge.call('closeWindow');
                         })
                        // alert("请退出页面，重新进入，否者此次申请无效！");
                        return;
                    } 
                }else{
                    this.$dialog.alert({
                        title:"提示",
                        message:res.msg
                    })
                    return;
                }
            })
    },
    // 获取待支付列表
    getPayList(){
        let params = {
            applyState:1,
            payState:1,
            openId:this.openId
        }

        nucleicPayApi.listApplyInfo(params)
            .then(res=>{
                if(res.status==0){
                    if(res.data){
                        this.listData = res.data
                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:"未找到支付记录"
                        })
                    }
                }
            })
    },
    // 微信支付
    wxToPay(applyId, price) {
            var _this = this
			let params = {
				applyId: Number(applyId),
				actualPay: Number(price),
				payType: 1
			}
            nucleicPayApi.wxPay(params)
                .then(res=>{
                    if(res.status==0){
                        let payConfig = res.data
                        WeixinJSBridge.invoke(
							'getBrandWCPayRequest',
							{
								appId: payConfig.appId, //公众号ID，由商户传入
								timeStamp: payConfig.timeStamp, //时间戳，自1970年以来的秒数
								nonceStr: payConfig.nonceStr, //随机串
								package: payConfig.package,
								signType: payConfig.signType, //微信签名方式
								paySign: payConfig.paySign //微信签名
							},
							function (res) {
								//alert(res.err_msg);
								if (res.err_msg == 'get_brand_wcpay_request:ok') {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    _this.$dialog.alert({
                                        title:"提示",
                                        message:"支付成功，请等待页面刷新",
                                    })
									// alert('支付成功，请等待页面刷新')
									setTimeout(function () {
										// var openId = $('#openId').val()
										_this.getPayList()
									}, 3000)
								} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
									// 提示用户取消了二维码支付
									//deleteApply(infoData.applyId);
                                    _this.$dialog.alert({
                                        title:"提示",
                                        message:"用户取消了支付",
                                    })
									// alert('用户取消了支付')
									return
								} else if (res.err_msg == 'get_brand_wcpay_request:fail') {
									// 提示支付失败
									//deleteApply(infoData.applyId);
                                    _this.$dialog.alert({
                                        title:"提示",
                                        message:"支付失败",
                                    })
									// alert('支付失败')
								}
							}
						)
                    }else{
                        _this.$dialog.alert({
                            title:"提示",
                            message:res.msg
                        })
                        return
                    }
                })
                .catch(err=>{
                    _this.$dialog.alert({
                        title:"错误",
                        message:res.msg
                    })
                })
		}
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created  () {

  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted  () {
    this.init()
  },
  beforeCreate  () {}, // 生命周期 - 创建之前
  beforeMount  () {}, // 生命周期 - 挂载之前
  beforeUpdate  () {}, // 生命周期 - 更新之前
  updated  () {}, // 生命周期 - 更新之后
  beforeDestroy  () {}, // 生命周期 - 销毁之前
  destroyed  () {}, // 生命周期 - 销毁完成
  activated  () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        font-size: 16px;
        .list-item{
            padding: 5px 10px;
            background-color: white;
            margin: 10px auto;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 0 12px rgba(0, 0, 0, 10%);
            .person-info{
                .name{
                    font-weight: 800;
                }
                .phone{
                    color:#696969;
                    margin-top: 10px;
                }
            }
            .userNum{
                text-align:center;
                background-color: #F4F4F4;
                border-radius: 10px;
                .title{
                    font-weight: 500px;
                }
                .number{
                    color:red;
                    font-size: 20px;
                }
            }
            .address{
                margin-top:10px;
                font-size: 14px;
            }
            .pay-btn{
                text-align:end;
                padding-top:10px;
                .btn{
                    width:80px;
                    height: 30px;
                    border-radius: 5px;
                }
            }
            .date{
                border-top:1px dashed grey;
                color:grey;
                font-size: 14px;
                margin-top: 10px;
                padding-top: 10px;
                text-align: end;
                
            }
        }
    }
</style>